<template>
	<view class="container">
		<view class="conBack" style="background-image: url('../../static/image/beijin.png');">
			<!-- 自定义头部导航栏 -->
			<navbar :title="title" @conGoto="conGoto"></navbar>
			<view class="content">
				<view class="company_txt">
					<view class="c_name">
						数字三农服务平台
					</view>
					<view class="c_dp">
						<text>线下生活体验店</text>
						<image src="../../static/image/right.png"></image>
					</view>
				</view>
				<view class="search_btn">
					<!-- 搜索 -->
					<Search class="search_i" :inputConent="inputConent" @conGoto="conGoto"></Search>
					<view class="rightBtn">
						<view class="rightBtn_lst" @click="openashop">
							<image src="../../static/image/shop.png" style="width: 45rpx;height: 40rpx;"></image>
							<view class="text">我要开店</view>
						</view>
						<view class="rightBtn_lst" @click="wantCollaborate">
							<image src="../../static/image/cooperate.png" style="width: 52rpx;height: 40rpx;"></image>
							<view class="text">我要合作</view>
						</view>
						<view class="rightBtn_lst" @click="shareBtn">
							<image src="../../static/image/share.png" style="width: 37rpx;height: 40rpx;"></image>
							<view class="text">分享</view>
						</view>
					</view>
				</view>
				<view class="swiper_sw">
					<swiper class="swiper-box" indicator-dots autoplay interval="2000" indicator-active-color="#fff"
						circular duration="500">
						<swiper-item v-for="(item, index) in info" :key="index">
							<view :class="item.colorClass" class="swiper-item">
								<image class="image" :src="item.url" mode="bottom" />
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="con-tab">
			<view class="conTabList" v-for="(item,index) in tabbarHome" @click="goTourl(item.url)" :key="index">
				<image :src="item.image"></image>
				<view class="nameTxt">{{item.name}}</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="goods">
			<!-- 推荐 -->
			<view class="goods-re-tow">
				<!-- 视频 -->
				<view class="goods-re-list">
					<view class="conMain">
						<!-- autoplay -->
						<video id="myVideo" class="myVideo"
							src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" controls 
							loop></video>
					</view>
				</view>
				<!-- 热门活动 -->
				<view class="goods-re-list">
					<view class="conMain">
						<view class="ac-ti">
							热门活动
						</view>
						<view class="acti-con">
							<view class="acti-main">
								<view class="acti-main-list">
									<view class="acimg">活动图片</view>
								</view>
								<view class="acti-main-list">
									<view class="acimg">活动图片</view>
								</view>
								<view class="acti-main-list">
									<view class="acimg">活动图片</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goods-re-tow">
				<view class="goods-re-list goodsTwo">
					<view class="conMain">
						<view class="goods-img">
							<image src="@/static/image/shopp.png"></image>
						</view>
						<view class="goods-text">
							<view class="brief-i">
								橘子橙子柚子西嘎水果嘎嘎甜橘子橙子柚子西嘎水果11
							</view>
							<view class="evaluate">
								<text>97.2%好评</text>|
								<text class="txrt">香甜可口口感独特</text>
							</view>
							<view class="goodsPro">
								<view class="price">￥99.99</view>
								<view class="totail">总售1.1万+件</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 积分兑换 -->
				<view class="goods-re-list goodsTwo">
					<view class="conMain">
						<view class="goods-img">
							<view class="contit">积分兑换</view>
							<image src="@/static/image/shopp.png"></image>
						</view>
						<view class="goods-text">
							<view class="brief-i">
								苹果14pro
							</view>
							<view class="goodsPro">
								<view class="price">
									<image src="../../static/image/points.png"></image><text>3000</text>
								</view>
								<view class="totail">库存：12221</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享-->
		<uni-popup ref="recommend" type="bottom" background-color="#fff" border-radius="10px 10px 0 0" :show="true"
			@close="closePopup">
			<view class="helpMain">
				<view class="helpMainTit">
					<view>分享到</view>
				</view>
				<view class="shareBtn">
					<button open-type="share" hover-class='none' @click="sharePen()">
						<view class="shareBtn_l">
							<image src="../../static/image/wechat.png"></image>
							<view>微信好友</view>
						</view>
					</button>
					<view class="shareBtn_l" @click="generatePoster">
						<image src="../../static/image/poster.png"></image>
						<view>生成海报</view>
					</view>
				</view>
				<view class="shareclose" @click="closePopup()">
					<button>取消</button>
				</view>
			</view>
		</uni-popup>
		<!-- 海报 -->
		<view class="my-canvas-box" @touchmove.stop.prevent :class="posterInfo.status ? 'show' : 'hide'">
			<view class="conCanvas">
				<view class="cleard" @click="posterInfo.status = false">
					<image src="@/static/image/close.png"></image>
				</view>
				<canvas class="my-canvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"
					canvas-id="myCanvas"></canvas>
				<!-- <image mode="widthFix" :src="getSharePYQurl.url"></image> -->
				<view class="haibao">
					<view class="haibaoBtn" @click.stop="saveSharePic(getSharePYQurl.url)">保存海报</view>
				</view>
			</view>
		</view>
		<!-- <TabBar currentPath="/pages/index/index"></TabBar> -->
		<custom-tabbar :currentIndex="0"></custom-tabbar>
	</view>
</template>

<script>
	import Search from '@/components/search'; //搜索
	import navbar from "@/components/navbar" // 自定义头部导航栏组件
	import CustomTabbar from "@/components/custom-tabbar.vue" // 自定义头部导航栏组件

	export default {
		components: {
			Search,
			navbar,
			CustomTabbar
		},
		data() {
			return {
				/* 自定义导航栏 */
				title: "首页/合肥",
				inputConent: '',
				indicatorDots: true,
				autoplay: true,
				interval: 2000, // 切换的间隔时间
				duration: 500, // 滑动动画时长
				info: [{
						url: '../../static/image/shopp.png',
						content: '内容 A'
					},
					{
						url: '../../static/image/shopp.png',
						content: '内容 B'
					},
					{
						url: '../../static/image/shopp.png',
						content: '内容 C'
					}
				],
				tabbarHome: [{
						name: '三农贴吧',
						image: '../../static/image/1.png',
						url: '/pages/home-btn/pages/sanNong?title=1'
					},
					{
						name: '果树认养',
						image: '../../static/image/2.png',
						url: '/pages/home-btn/pages/sponsorDe/sponsorDe?tabIndex=1'
					},
					{
						name: '家畜认养',
						image: '../../static/image/7.png',
						url: '/pages/home-btn/pages/sponsorDe/sponsorDe?tabIndex=2'
					},
					{
						name: '农场游戏',
						image: '../../static/image/6.png',
						url: ''
					},
					{
						name: '果园直播',
						image: '../../static/image/3.png',
						url: '/pages/home-btn/pages/liveBroadcast/liveBroadcast'
					},
					{
						name: '产品商城',
						image: '../../static/image/4.png',
						url: ''
					},
					{
						name: '果园活动',
						image: '../../static/image/8.png',
						url: '/pages/home-btn/pages/orchardActivities/orchardActivities'
					},
					{
						name: '会员中心',
						image: '../../static/image/9.png',
						url: ''
					},
					{
						name: '培训指导',
						image: '../../static/image/10.png',
						url: '/pages/home-btn/pages/sanNong?title=2'
					},
					{
						name: '平台宣传片',
						image: '../../static/image/5.png',
						url: ''
					}
				],
				// 用来控制canvas遮罩层的显示与隐藏
				posterInfo: {
					status: false,
				},
				getShareurl: '', //获取朋友分享的海报地址及参数
				getSharePYQurl: '', //朋友圈
				userInfo: '',
				cImahe: '../../static/image/2.jpg',
				tempFilePath: '', //canvas生成的海报
				canvasW: 0,
				canvasH: 0,
				avatar: ''
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		methods: {
			conGoto() {

			},
			goTourl(url) {
				uni.navigateTo({
					url: url
				})
			},
			shareBtn() {
				this.$refs.recommend.open('bottom')
			},
			closePopup() { //关闭弹窗
				this.$refs.recommend.close()
			},
			sharePen(i) { //微信分享
				this.posterInfo.status = false
				this.$refs.recommend.close()
			},
			shareNo() { //海报
				this.posterInfo.status = false
				this.$refs.recommend.close()
			},
			generatePoster() {
				this.posterInfo.status = true
			},
			// 保存海报
			saveSharePic(url) {
				uni.showModal({
					title: '提示',
					content: '确定要保存海报吗？',
					success: function(res) {
						if (res.confirm) {
							uni.downloadFile({
								url: url, //分享的图片的链接
								success: (res) => {
									console.log(res)
									// 保存本地
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												title: '保存成功',
												icon: 'none',
												duration: 3000
											});
										},
										fail: function() {
											uni.showToast({
												title: '保存失败',
												icon: 'none',
												duration: 3000
											});
										}
									});
								}
							})
						}
					}
				});
			},
			sharehaibao() { //分享海报图片到微信
				uni.downloadFile({
					url: this.getSharePYQurl.url, //分享的图片的链接
					success: (res) => {
						console.log(res)
						uni.showShareImageMenu({
							path: res.tempFilePath

						})
					}
				})
				this.posterInfo.status = false
				this.$refs.recommend.close()
			},
			// 生成海报
			generatePoster() {
				let ctx = uni.createCanvasContext('myCanvas', this);
				uni.getImageInfo({
					src: '../../static/image/hiabao.png', //图片用来做背景
					success: (res) => {
						ctx.save()
						this.canvasW = res.width / 2
						this.canvasH = res.height / 2
						ctx.drawImage('../../static/image/hiabao.png', 0, 0, this.canvasW, this.canvasH)
						ctx.draw(true)
						ctx.save()
						ctx.setFontSize(11)
						ctx.setFillStyle("#A6A6A6")
						ctx.fillText('自提点：上海市XXXXXXXXXXXXXXXXXXXX门店', 33, 300)
						ctx.setFontSize(11)
						ctx.setFillStyle("#A6A6A6")
						ctx.fillText('体验店仅支持浏览，请修改门店', 33, 320)
						ctx.drawImage(this.cImahe, 200, 360, 156 / 2, 156 / 2) //二维码

						ctx.draw(true, setTimeout(() => {
							uni.canvasToTempFilePath({
								canvasId: 'canvasID',
								success: (res) => {
									this.tempFilePath = res.tempFilePath
									console.log('filepath', res.tempFilePath);
									ctx.draw();
								}
							}, this)
						}, 500))
					},
				})
				this.posterInfo.status = true
			},
			/* 我要开店 */
			openashop() {
				uni.navigateTo({
					url: "/pages/home-btn/pages/openashop/openashop"
				})
			},
			wantCollaborate() {
				uni.navigateTo({
					url: "/pages/home-btn/pages/wantCollaborate/wantCollaborate"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 100px;
		/* 避免内容被 TabBar 遮挡 */
	}

	.content {
		width: 96%;
		margin: 0 auto;
	}

	.conBack {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	.company_txt {
		display: flex;
		align-items: center;
		margin: 15rpx 0;

		.c_name {
			font-family: Source Han Sans SC;
			font-weight: bold;
			font-size: 31rpx;
			color: #292929;
		}

		.c_dp {
			margin-left: 28rpx;
			font-size: 21rpx;
			color: #666666;
			background: #fff;
			line-height: 30rpx;
			padding: 0 10rpx;
			border-radius: 10rpx;

			image {
				width: 8.33rpx;
				height: 16.67rpx;
				margin-left: 8rpx;
			}
		}
	}

	.search_btn {
		margin-top: 25rpx;
		display: flex;
		align-items: center;

		.search_i {
			width: 60%;
			height: 65rpx;
			line-height: 65rpx;
		}

		.rightBtn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;
			width: 40%;

			.rightBtn_lst {
				.text {
					font-weight: bold;
					font-size: 21rpx;
					color: #333333;
				}
			}
		}
	}

	.swiper_sw {
		width: 100%;
		height: 248rpx;
		padding: 20rpx 0;

		.swiper-box {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				border-radius: 10rpx;
				color: #fff;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}

	.con-tab {
		overflow: hidden;
		padding-bottom: 20rpx;

		.conTabList {
			float: left;
			width: 20%;
			text-align: center;
			margin-top: 18rpx;

			image {
				width: 79rpx;
				height: 73rpx;
			}

			.nameTxt {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}

	.goods {
		width: 96%;
		margin: 0 auto;

		.goods-re-tow {
			overflow: hidden;
			width: 100%;
		}
	}

	.goods-re-list {
		width: 50%;
		height: 370rpx;
		float: left;
		margin-top: 26rpx;

		.conMain {
			width: 95%;
			height: 100%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10rpx;
			position: relative;

			.myVideo {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}

			.ac-ti {
				width: 100%;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				color: $main-color;
				background-color: #fff;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}

			.acti-con {
				height: 320rpx;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				background: $main-color;

				.acti-main {
					width: 100%;
					overflow: hidden;

					.acti-main-list {
						width: 50%;
						height: 141rpx;
						float: left;
						text-align: center;
						margin-top: 15rpx;

						.acimg {
							background-color: #fff;
							width: 92%;
							margin: 0 auto;
							height: 100%;
							border-radius: 10rpx;
							font-size: 26rpx;
							color: #333333;
						}
					}
				}
			}

			.goods-img {
				width: 100%;
				height: 244.5rpx;
				position: relative;

				.contit {
					position: absolute;
					z-index: 2;
					font-size: 21rpx;
					color: #FFFFFF;
					line-height: 25rpx;
					margin-top: 26rpx;
					margin-left: 26rpx;
				}

				image {
					width: 100%;
					height: 100%;
					border-top-right-radius: 10rpx;
					border-top-left-radius: 10rpx;
				}
			}

			.goods-text {
				width: 95%;
				margin: 0 auto;
				margin-top: 10rpx;

				.brief-i {
					font-size: 21rpx;
					color: #333333;
					line-height: 25rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
				}

				.evaluate {
					font-size: 21rpx;
					color: #A6A6A6;
					line-height: 25rpx;
					margin-top: 8rpx;

					text {
						margin-right: 15rpx;
					}

					.txrt {
						margin-left: 15rpx;
					}
				}

				.goodsPro {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 8rpx;
					position: absolute;
					width: 95%;
					bottom: 0;
					margin-bottom: 10rpx;

					.price {
						font-size: 26rpx;
						color: $main-color;
						line-height: 25rpx;
						font-weight: bold;
						display: flex;
						align-items: center;

						image {
							width: 40.5rpx;
							height: 31rpx;
							margin-right: 8rpx;
							margin-left: 5rpx;
						}
					}

					.totail {
						font-size: 21rpx;
						color: #A6A6A6;
						line-height: 25rpx;

					}
				}
			}
		}
	}

	.goodsTwo {
		height: 379rpx;
	}

	.helpMain {
		width: 100%;
		font-weight: 400;
		font-size: 21rpx;
		color: #999999;

		.helpMainTit {
			width: 100%;
			color: #333333;
			height: 98rpx;
			line-height: 98rpx;
			font-weight: bold;
			font-size: 38rpx;
			text-align: center;

			image {
				width: 19rpx;
				height: 19rpx;
				margin-top: 20rpx;
			}
		}

		.shareBtn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;
			width: 90%;
			margin: 0 auto;
			height: 240rpx;

			button {
				font-size: 31rpx;
				color: #A6A6A6;
			}

			.shareBtn_l {
				font-size: 31rpx;
				color: #A6A6A6;

				image {
					width: 108rpx;
					height: 108rpx;
					margin-bottom: 8rpx;
				}
			}
		}

		.shareclose {
			border-top: 1px solid #ccc;

			button {
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				font-weight: 500;
				font-size: 31rpx;
				color: #333333;
			}
		}
	}

	.my-canvas-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		top: 0;
		left: 0;
		z-index: 99;
		display: table-cell;
		vertical-align: middle;

		.conCanvas {
			width: 85%;
			margin: 0 auto;
			margin-top: 160rpx;
			position: relative;

			.cleard {
				position: absolute;
				right: 0;
				z-index: 9;
				margin-top: -25rpx;
				margin-right: -30rpx;

				image {
					width: 46rpx;
					height: 46rpx;
				}
			}

			.my-canvas {
				width: 100%;
				text-align: center;
			}

			/* image{
			width: 100%;
			margin-top: 5vh;
		} */
			.haibao {
				width: 70%;
				margin: 0 auto;
				margin-top: 40rpx;

				.haibaoBtn {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					background-color: $main-color;
					text-align: center;
					border-radius: 25px;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}
		}

		&.hide {
			display: none;
		}

		&.show {
			display: block;
		}
	}
</style>